<template>
  <n-layout-header
      :style="{height: `${themeStore.layoutHeaderHeight}px`}" class="px-5" bordered>
    <div class="h-full w-full flex items-center justify-between">
      <div class="flex-1">
        <n-text strong type="info">
          {{title}}
        </n-text>
      </div>
      <n-space>
        <theme-change-button/>
        <n-dropdown :options="dropdownOptions"
                    :on-select="(key, option) => $emit('on-select', key, option)">
          <n-avatar round :size="34" bordered>
            <n-icon>
              <qr-code-outlined/>
            </n-icon>
          </n-avatar>
        </n-dropdown>
      </n-space>
    </div>
  </n-layout-header>
</template>

<script setup>

import {ThemeChangeButton} from "../../components/index.js";
import {useThemeStore} from "../../store/theme/index.js";
import {QrCodeOutlined} from '@vicons/material'

const themeStore = useThemeStore()
defineProps({
  title: {
    type: String,
    required: true
  },
  dropdownOptions: {
    type: Array,
    required: true,
    default: () => []
  }
})
</script>

<style scoped>

</style>
